<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>NETTY SOCKET.IO DEMO</title>
    <base>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/socket.io/2.3.0/socket.io.dev.js"></script>
    <style>
        body {
            padding: 20px;
        }
        #console {
            height: 450px;
            overflow: auto;
        }
        .username-msg {
            color: orange;
        }
        .connect-msg {
            color: green;
        }
        .disconnect-msg {
            color: red;
        }
    </style>
</head>

<body>
    <div id="console" class="well"></div>
</body>
<script type="text/javascript">
    const PUSH_EVENT = "push_event"
    const RESPONSE_EVENT = "response_event"

    var socket;
    connect();



    function connect() {
        var loginUserNum = 'joker1';
        var opts = {
            query: 'deviceCode=' + loginUserNum,
            transports:['websocket','xhr-polling','jsonp-polling']
        };
        socket = io.connect('http://socket-test.fivebao.com', opts);
        socket.on('connect', function () {
            serverOutput('<span class="connect-msg">连接成功</span>');
        });
        socket.on(PUSH_EVENT, function (data) {
            const { content } = data
            output('<span class="username-msg">' + content + ' </span>');
            console.log(data);
            // 必须 给 回波
            socket.emit(RESPONSE_EVENT, 'success')
        });

        socket.on('disconnect', function () {
            serverOutput('<span class="disconnect-msg">' + '已下线! </span>');
        });

     
    }
    
    function output(message) {
        var element = $("<div>" + " " + message + "</div>");
        $('#console').prepend(element);
    }

    function serverOutput(message) {
        var element = $("<div>" + message + "</div>");
        $('#console').prepend(element);
    }
</script>
</html>
